<template>
  <div >
      <div id="barChart" ref="barChart"></div>
  </div>
</template>
<script setup>
  import {ref,onMounted} from 'vue'
  let barChart=ref();
      import * as echarts from 'echarts';
    let makeBar=()=>{
        let mychart=echarts.init(barChart.value)

        // 
      let option = {
         title:{
        
         },
          legend:{},
          tooltip:{},
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [
                120,
                {
                  value: 200,
                  itemStyle: {
                    color: '#a90000'
                  }
                },
                150,
                80,
                70,
                110,
                130
              ],
              type: 'bar'
            }
          ]
        };
      mychart.setOption(option)

    }
    // 调用初始化柱状图
    onMounted(()=>{
        makeBar();
    })
</script>
<style lang="scss">
    #barChart{
       width:100%;
       height:300px;
       background:green;
       margin-top:20px;
    }
</style>